import React from 'react';
import ReactEcharts from 'echarts-for-react';
import echarts from 'echarts';

const Pie = () => {

  const option = {
    title: {
        text: '收入占比',
        // left: '50%',
        // textAlign: 'center',
        textStyle:{
          color:'#FFF'
        }
    },
    tooltip: {
        trigger: 'item',
        formatter: "{a} <br/>{b}: {c} ({d}%)"
    },

    // legend: {
    //     orient: 'vertical',
    //     x: 'right',
    //     data:['直接访问','邮件营销','联盟广告','视频广告','搜索引擎'],
    //     textStyle:{
    //       color:'#FFF'
    //     }
    // },
    color: ['#ecff53','#6fbb60', '#61a0a8', '#4ed1d5', '#6b76dd','#749f83',  '#ca8622', '#bda29a','#6e7074', '#546570', '#c4ccd3'],
    series: [
        {
            name:'访问来源',
            type:'pie',
            radius: ['50%', '70%'],
            avoidLabelOverlap: false,
            label: {
                normal: {
                    show: false,
                    position: 'center'
                },
                emphasis: {
                    show: true,
                    textStyle: {
                        fontSize: '30',
                        fontWeight: 'bold'
                    }
                }
            },
            label: {
                   normal: {
                       position: 'outer'
                   }
               },

            labelLine: {
                normal: {
                    show: true
                }
            },
            data:[
                {value:335, name:'直接访问'},
                {value:310, name:'邮件营销'},
                {value:234, name:'联盟广告'},
                {value:135, name:'视频广告'},
                {value:1548, name:'搜索引擎'}
            ]
        }
    ]
};


    return (
      <div>
        <ReactEcharts
          option={option}
          style={{height: '30vh', width: '100%'}}
         />
      </div>
    );
}
export default Pie;
